// 放大镜的构造函数
/*
  放大镜书写

  名字:
    + show: 展示图片的盒子, 是一个 div 内部有一个 img(标准)
    + mask: 展示图片盒子上面的 遮罩层(黄色)
    + list: 列表页面盒子, 里面有多个 img 标签等待点击切换
    + enlarge: 放大镜盒子, 是一个 div 内部有一个 img(巨大)

  需求:
    1. 移入移出
      => 移入 show 盒子的时候, 显示 mask 和 enlarge
      => 移出 show 盒子的时候, 隐藏 mask 和 enlarge
    2. 点击事件
      => 点击 list 下的 img 的时候
      => 切换 show 里面 img 的 src 属性
      => 切换 enlarge 里面 img 的 src 属性
    3. 鼠标移动
      => 鼠标在 show 内移动的时候
      => 让 mask 盒子跟随鼠标移动
      => 根据比例计算一个 enlarge 内 img 移动的尺寸
      => 让 enlarge 盒子内的 img 标签跟随移动

  分析构造函数:
    => 将来创建出来的对象需要完成 放大镜功能
    => 属性
      + ele: 表示当前放大镜的最大的盒子
      + show: 自己的 ele 内查找 .show
      + mask: 自己的 ele 内查找 .mask
      + list: 自己的 ele 内查找 .list
      + enlarge: 自己的 ele 内查找 .enlarge
      + mask 盒子的尺寸
      + show 盒子的尺寸
      + enlarge 内的 图片的 大小
    => 方法
      + setScale: 调整盒子大小, 让他们成比例出现
        => 修改 enlarge 盒子的大小
      + overOut: 专门让自己的 show 有移入移出事件
      + changeImg: 专门让自己的 list 有点击切换功能
      + move: 让自己的 mask 和 enlarge 可以跟随鼠标移动

*/

// function Enlarge(select) {
  // this.ele = document.querySelector(select)
  // 几个需要的元素
//   this.show = this.ele.querySelector('.show')
//   this.mask = this.ele.querySelector('.mask')
//   this.list = this.ele.querySelector('.list')
//   this.enlarge = this.ele.querySelector('.enlarge')
  // show 盒子的尺寸
//   this.show_width = this.show.clientWidth
//   this.show_height = this.show.clientHeight
  // mask 盒子的尺寸
//   this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
//   this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
  // enlarge 内图片的尺寸
//   this.bg_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width)
//   this.bg_height = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height)

  // 调用方法实现功能
//   this.setScale()
//   this.overOut()
//   this.changeImg()
//   this.move()
// }

// 书写完成的方法
// 1. setscale 调整尺寸
 /*
    mask 尺寸         x
  ------------ = -----------
    show 尺寸      大图片尺寸
  x * show 尺寸 = mask 尺寸 * 大图片尺寸
  x = mask 尺寸 * 大图片尺寸 / show 尺寸

  根据数据计算出尺寸
*/
// Enlarge.prototype.setScale = function () {
  // 1-1. 算数
//   this.enlarge_width = this.mask_width * this.bg_width / this.show_width
//   this.enlarge_height = this.mask_height * this.bg_height / this.show_height

  // 1-2. 赋值
//   this.enlarge.style.width = this.enlarge_width + 'px'
//   this.enlarge.style.height = this.enlarge_height + 'px'
// }

// 2. overOut 移入移出
// Enlarge.prototype.overOut = function () {
  // 2-1. 移入 show 盒子
//   this.show.addEventListener('mouseover', () => {
//     this.mask.style.display = 'block'
//     this.enlarge.style.display = 'block'
//   })

  // 2-2. 移出 show 盒子
//   this.show.addEventListener('mouseout', () => {
//     this.mask.style.display = 'none'
//     this.enlarge.style.display = 'none'
//   })
// }

// 3. changeImg 点击事件
// 给谁绑定事件, 给每一个 img 绑定事件
// 最好事件委托
// Enlarge.prototype.changeImg = function () {
  // 3-1. 给 this.list 绑定事件
//   this.list.addEventListener('click', e => {
    // 3-2. 判断点击的是 img 标签
//     if (e.target.nodeName !== 'IMG') return

    // 代码能来到这里, 说明一定点击的是 img 标签
    // 3-3. 实现切换类名
//     for (let i = 0; i < this.list.children.length; i++) {
//       this.list.children[i].classList.remove('active')
//     }
    // 当前点击的这一个加上
//     e.target.classList.add('active')

    // 3-4. 切换图片
    // 点击不同的 img, 给 show 和 enlarge 切换不同的内容
    // 渲染页面的时候, 把它需要切换的 图片地址, 以自定义属性书写在标签身上
//     const show_url = e.target.dataset.show
//     const enlarge_url = e.target.dataset.enlarge
    // show_url 赋值给 this.show 内的 img 修改 src
//     this.show.firstElementChild.src = show_url
    // enlarge_url 赋值给 this.enlarge 内的 img 修改 src
//     this.enlarge.firstElementChild.src = enlarge_url
//   })
// }

// 4. move 移动联动
// Enlarge.prototype.move = function () {
  // 4-1. 给 this.show 绑定 mousemove 事件
//   this.show.addEventListener('mousemove', e => {
    // 4-2. 拿到光标坐标点
    // 哪一组坐标: offset 一组
    // 拿到的是关于 事件目标 的坐标
//     let x = e.offsetX - this.mask_width / 2
//     let y = e.offsetY - this.mask_height / 2

    // 4-3. 边界值判断
//     if (x <= 0) x = 0
//     if (y <= 0) y = 0
//     if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
//     if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height

    // 4-4. 赋值
//     this.mask.style.left = x + 'px'
//     this.mask.style.top = y + 'px'

    // 4-5. 根据比例计算放大图片移动的尺寸
     /*
       移动距离x      mask_width
      ----------- = ------------
        bg_x        enlarge_width


      bg_x * mask_width = x * enlarge_width
      bg_x = x * enlarge_width / mask_width
    */
//     const bg_x = x * this.enlarge_width / this.mask_width
//     const bg_y = y * this.enlarge_height / this.mask_height

    // 4-6. 给 放大的图片 赋值
//     this.enlarge.firstElementChild.style.left = -bg_x + 'px'
//     this.enlarge.firstElementChild.style.top = -bg_y + 'px'
//   })
// }

// class Enlarge {
//   constructor (select) {
//     this.ele = document.querySelector(select)
//     this.show = this.ele.querySelector('.show')
//     this.mask = this.ele.querySelector('.mask')
//     this.list = this.ele.querySelector('.list')
//     this.enlarge = this.ele.querySelector('.enlarge')
//     this.show_width = this.show.clientWidth
//     this.show_height = this.show.clientHeight
//     this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
//     this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
//     this.bg_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width)
//     this.bg_height = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height)
//     this.setScale()
//     this.overOut()
//     this.changeImg()
//     this.move()
//   }

//   setScale () {
//     this.enlarge_width = this.mask_width * this.bg_width / this.show_width
//     this.enlarge_height = this.mask_height * this.bg_height / this.show_height
//     this.enlarge.style.width = this.enlarge_width + 'px'
//     this.enlarge.style.height = this.enlarge_height + 'px'
//   }

//   changeImg () {
//     this.list.addEventListener('click', e => {
//       if (e.target.nodeName !== 'IMG') return
//       for (let i = 0; i < this.list.children.length; i++) {
//         this.list.children[i].classList.remove('active')
//       }
//       e.target.classList.add('active')
//       const show_url = e.target.dataset.show
//       const enlarge_url = e.target.dataset.enlarge
//       this.show.firstElementChild.src = show_url
//       this.enlarge.firstElementChild.src = enlarge_url
//     })
//   }

//   overOut () {
//     this.show.addEventListener('mouseover', () => {
//       this.mask.style.display = 'block'
//       this.enlarge.style.display = 'block'
//     })
//     this.show.addEventListener('mouseout', () => {
//       this.mask.style.display = 'none'
//       this.enlarge.style.display = 'none'
//     })
//   }

//   move () {
//     this.show.addEventListener('mousemove', e => {
//       let x = e.offsetX - this.mask_width / 2
//       let y = e.offsetY - this.mask_height / 2
//       if (x <= 0) x = 0
//       if (y <= 0) y = 0
//       if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
//       if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
//       this.mask.style.left = x + 'px'
//       this.mask.style.top = y + 'px'

//       const bg_x = x * this.enlarge_width / this.mask_width
//       const bg_y = y * this.enlarge_height / this.mask_height
//       this.enlarge.firstElementChild.style.left = -bg_x + 'px'
//       this.enlarge.firstElementChild.style.top = -bg_y + 'px'
//     })
//   }
// }











//类名
class Enlarge {
    // 构造器: 等价于 ES5 的构造函数体
    constructor(select) {
        //获取元素
        this.ele = document.querySelector(select)
        this.show = this.ele.querySelector('.show')
        this.mask = this.ele.querySelector('.mask')
        this.list = this.ele.querySelector('.list')
        this.enlarge = this.ele.querySelector('.enlarge')
        this.show_width = this.show.clientWidth
        this.show_height = this.show.clientHeight
                                                //获取非行内元素
                                                //标准浏览器                                                //元素名             样式
        this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
        this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
        this.bg_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width)
        this.bg_height = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height)
        //函数调用
        this.setScale()
        this.overOut()
        this.changelmg()
        this.move()
    }
    //调整显示比例 
    setScale() {
 /*
    mask 尺寸         x
  ------------ = -----------
    show 尺寸      大图片尺寸

  x * show 尺寸 = mask 尺寸 * 大图片尺寸
  x = mask 尺寸 * 大图片尺寸 / show 尺寸
  根据数据计算出尺寸
*/
        this.enlarge_width = this.mask_width * this.bg_width / this.show_width
        this.enlarge_height = this.mask_height * this.bg_height / this.show_height
        this.enlarge.style.width = this.enlarge_width + 'px'
        this.enlarge.style.height = this.enlarge_height + 'px'

    }
//切换图片
    changelmg() {
                    //绑定事件
        this.list.addEventListener('click', e => {
            if (e.target.nodeName !== 'IMG') return
            for (let i = 0; i < this.list.children.length; i++) {
                //给当前每一个小图去除类名
                this.list.children[i].classList.remove('active')
            }
            //给目标添加类名
            e.target.classList.add('active')
            const show_url = e.target.dataset.show
            const enlarge_url = e.target.dataset.enlarge
            this.show.firstElementChild.src = show_url
            this.enlarge.firstElementChild.src = enlarge_url
        })
    }


    overOut() {
                                    //绑定鼠标移入事件
        this.show.addEventListener('mouseover', () => {
            //当鼠标移入的时候让隐藏的元素显示
            this.mask.style.display = 'block'
            this.enlarge.style.display = 'block'
        })
                                    //绑定鼠标移出事件
        this.show.addEventListener('mouseout', () => {
            //当鼠标移出的时候让显示的元素隐藏
            this.mask.style.display = 'none'
            this.enlarge.style.display = 'none'

        })
    }

    move() {
                            //绑定鼠标移动事件
        this.show.addEventListener('mousemove', e => {
            //让鼠标放在遮罩层的中间
            let x = e.offsetX - this.mask_width / 2
            let y = e.offsetY - this.mask_height / 2
            //进行边界设置判断
            if (x <= 0) x = 0
            if (y <= 0) y = 0
            if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
            if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
            //给遮罩层赋值
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
 /*
       移动距离x      mask_width
      ----------- = ------------
        bg_x        enlarge_width

      bg_x * mask_width = x * enlarge_width
      bg_x = x * enlarge_width / mask_width
    */
            const bg_x = x * this.enlarge_width / this.mask_width
            const bg_y = y * this.enlarge_height / this.mask_height
            this.enlarge.firstElementChild.style.left = -bg_x + 'px'
            this.enlarge.firstElementChild.style.top = -bg_y + 'px'
        })
    }
}


